<template>
  <div class="contain">
    <Header />
  <sideshow />
  <div class="gallery-container">
    <div
      v-for="(item, index) in images"
      :key="index"
      class="image-wrapper"
      @mouseover="handleHover(index)"
      @mouseleave="handleLeave(index)"
      @click="handleClick(item.route)"
    >
      <img
        :src="item.src"
        :class="{ 'image-zoom': isHovered[index] }"
      />
      <div class="image-caption">{{ item.caption }}</div>
    </div>
  </div>
  <router-view></router-view>
  </div>
</template>

<script setup>
import Header from "@/modules/module4/modules4-War/components/Header.vue";
import sideshow from "@/modules/module4/modules4-War/components/SideShow.vue";
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import image1 from '../assets/image/401.jpg';
import image2 from '../assets/image/402.jpg';
import image3 from '../assets/image/403.jpg';
import image4 from '../assets/image/404.jpg';
const router = useRouter();
const images = ref([
  { src: image1, caption: '毛泽东', route: '/Persons/tab1' },
  { src: image2, caption: '朱德', route: '/Persons/tab2' },
  { src: image3, caption: '周恩来', route: '/Persons/tab3' },
  { src: image4, caption: '彭德怀', route: '/Persons/tab4' },
]);

const isHovered = ref(Array(4).fill(false));

const handleHover = (index) => {
  isHovered.value[index] = true;
};

const handleLeave = (index) => {
  isHovered.value[index] = false;
};

const handleClick = (route) => {
  router.push(route);
};
</script>

<style scoped>
.contian{
  font-family: "microsoft yahei, arial, helvetica, sans-serif";
  font-size: 16px;
  background-image: url("../assets/image/400.jpeg"); /* 确保路径正确 */
  background-size: cover; /* 覆盖整个页面 */
  background-position: center; /* 居中显示 */
  background-attachment: fixed; /* 固定背景，不随滚动条滚动 */
}
.gallery-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  padding: 20px;
}

.image-wrapper {
  text-align: center;
  cursor: pointer;
}

.image-wrapper img {
  width: 200px;
  height: 200px;
  transition: transform 0.3s;
}

.image-wrapper img.image-zoom {
  transform: scale(1.1);
}

.image-caption {
  margin-top: 10px;
  font-size: 16px;
  color: #333;
}
</style>